<template>
	<view class="tjzz-content" :style="{'background-image': 'url('+STATIC_URL+'/image/tribunal/index/popup-bg.png)'}">
		<view class="tjzz-item" v-for="(item,index) in roundList" :key="index">
			<view class="title">
				{{ item.name }}
			</view>
			<view class="address">
				<span>{{calcDist(item)}}</span>
				<span style="margin-left: 1rem;" :title="item.address">{{item.address}}</span>
			</view>
			<view class="phone">联系电话：{{item.phone}}</view>
			<view class="phone">
				<span class="connect-count">{{item.connectCount||0}}人</span>联系过
			</view>
			<view class="btn-area">
				<view class="btn">
					<u-icon :name="STATIC_URL+'/image/tribunal/index/icon-call.png'" label="电话" width="50rpx"
						height="50rpx" labelPos="bottom" @click="handleCallClick(item)"></u-icon>
				</view>
				<view class="btn">
					<u-icon space="6px" :name="STATIC_URL+'/image/tribunal/index/icon-nav.png'" label="路线" width="50rpx"
						height="50rpx" labelPos="bottom" @click="handleNavClick(item)">
					</u-icon>
				</view>
			</view>
		</view>
		<view class="btn-cancle">
			<u-button class="btn" type="warning" @click="handleClose()" text="取消"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["dataList", "position"],
		components: {},
		data() {
			return {
				roundList: [],
				navShow: false,
				clickItem: {},
				API_URL: this.env.BASE_URL,
				STATIC_URL: this.env.BASE_STATIC_URL,
			}
		},
		methods: {
			queryData() {
				uni
					.request({
						url: this.BASE_URL + "/tribunal/mediate/nearbyMediatelist",
						method: "GET",
						dataType: "json",
						data: {
							longitude: this.position.longitude,
							latitude: this.position.latitude
						},
					})
					.then((res) => {
						this.roundList = res[1].data.data;
					});
			},
			initData() {
				let self = this;
				if (this.dataList && this.dataList.length > 0) {
					this.roundList = this.dataList;
					return;
				}
				self.queryData();
			},
			handleClose() {
				this.$emit("handleClose");
			},
			// 拨打电话
			handleCallClick(item) {
				let self = this;
				let phone = item.phone;
				if (!phone) {
					this.$refs.uToast.show({
						type: 'error',
						message: "该组织无电话号码！",
					})
					return;
				}
				const res = uni.getSystemInfoSync();

				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: phone,
						success() {
							console.log('拨打成功！');
							this.updateConnectCount(item.id);
						},
						fail() {
							console.log('拨打失败');
						}
					})
				} else {
					uni.showActionSheet({
						itemList: [phone, '呼叫'],
						success: function(res) {
							console.log(res);
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: phone,
								})
								self.updateConnectCount(item.id);
							}
						}
					})
				}

			},
			updateConnectCount(id) {
				let self = this;
				uni.request({
						url: this.BASE_URL + "/tribunal/mediate/updateConnectCount",
						method: "POST",
						dataType: "json",
						data: {
							id: id
						},
					})
					.then((res) => {
						self.queryData();
					});
			},
			handleNavClick(item) {
				let self = this;
				if (!item.latitude || !item.longitude) {
					this.$message.error("未标注位置信息");
					return;
				}
				let bdPosition = this.bd_encrypt(item.longitude, item.latitude);

				uni.openLocation({
					latitude: Number(bdPosition.bd_lat),
					longitude: Number(bdPosition.bd_lng),
					name: item.name,
					address: item.address,
					// 缩放大小
					scale: 18,
					success: function() {
						console.log('成功的回调success');
					}
				});
			},
			bd_encrypt(gg_lng, gg_lat) {
				var X_PI = (Math.PI * 3000.0) / 180.0;
				var x = gg_lng,
					y = gg_lat;
				var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
				var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
				var bd_lng = z * Math.cos(theta) + 0.0065;
				var bd_lat = z * Math.sin(theta) + 0.006;
				return {
					bd_lat: bd_lat,
					bd_lng: bd_lng,
				};
			},
			calcDist(item) {
				if (!item.latitude ||
					!item.longitude ||
					!this.position.latitude ||
					!this.position.longitude) {
					return "未知";
				}
				let dist =
					Math.sqrt(
						Math.pow(item.latitude - this.position.latitude, 2) +
						Math.pow(item.longitude - this.position.longitude, 2)
					) * 111;
				return dist.toFixed(1) + "km";
			},
		},
		mounted() {
			this.initData();
		}
	}
</script>

<style lang="scss">
	.tjzz-content {
		padding: 40rpx;
		font-family: PingFangSC-Medium;
		text-align: left;
		background-color: #7f7f7f;
		background-repeat: no-repeat;
		background-size: 100%;
		width: 550rpx;
		line-height: 40rpx;
		height: 750rpx;
		overflow-y: scroll;

		.tjzz-item {
			.title {
				font-size: 32rpx;
				color: #000000;
				letter-spacing: 0;
				line-height: 62rpx;
				font-weight: 600;
			}

			.address {
				width: 400rpx;
				font-size: 26rpx;
				color: #333333;
				letter-spacing: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.phone {
				font-size: 24rpx;
				color: #999999;
				letter-spacing: 0;

				.connect-count {
					font-size: 22rpx;
					color: #447CFF;
				}
			}

			position: relative;
			margin-bottom: 30rpx;

			.btn-area {
				justify-content: center;
				position: absolute;
				right: 0rpx;
				top: 40rpx;

				.btn {
					display: inline-block;
					margin: 10rpx
				}
			}
		}

		.btn-cancle {
			text-align: center;
			width: 88%;
			position: absolute;
			bottom: 20rpx;

			.btn {
				width: 80%;
				margin: 0 auto;
			}
		}
	}
</style>
